*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg,#f5f7fa,#c3cfe2);
}
.container{
    width: 400px;
    height: 400px;
    display: grid;
    /*3*3*/
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(3,1fr);
    /*网络分区*/
    grid-template:
            'A A B'
            'C D B'
            'C E E';
    gap: 10px;
    /*绑定动画：动画名 时长 线性 无线播放*/
    animation: rotate 10s linear infinite;
}
.item{
    overflow: hidden;
    border: 1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item:nth-child(1){
     grid-area: A;
 }
.item:nth-child(2){
    grid-area: B;
}
.item:nth-child(3){
     grid-area: C;
}
.item:nth-child(4){
      grid-area: D;
}
.item:nth-child(5){
       grid-area: E;
}
.item img{
    width: 250%;
    height: 250%;
    object-fit: cover;
    animation: rotate 10s linear infinite;
}
@keyframes rotate {
    to{
        transform: rotate(360deg);
    }
}
